import React from "react";

import Card from "@material-ui/core/Card";
import Button from "@material-ui/core/Button";
import List from "@material-ui/core/List";
import { Typography } from "@material-ui/core";

import { useTranslation } from "react-i18next";

import CountUp from "react-countup";
import PortfolioItem from "./components/PortfolioItem";

export default function Portfolio() {
  const { t } = useTranslation();
  return (
    <>
      <Card className="portfolio-container">
        <div className="portfolio-header">
          <Typography
            variant="h6"
            color="textPrimary"
            className=" font-size-xxl pb-2  mt-4 ml-4"
          >
            {t("dashboard:portfoliobox_Header")}
          </Typography>
          <Button className="font-size-xl view-all-btn" color="primary">
            {t("buttons:view_all")}
          </Button>
        </div>
        <div className="divider" />
        <div className="divider" />
        <div className="portfolio-widget ">
          <h1
            className="text-center font-weight-bolder"
            style={{ fontSize: "4rem" }}
          >
            <Typography
              color="textPrimary"
              component="span"
              variant="h2"
              className="mt-3"
            >
              <span className="opacity-6 font-size-xxl">$</span>
              <CountUp
                start={0}
                end={256.695}
                duration={1}
                separator=""
                delay={1}
                decimals={3}
                decimal=","
                prefix=""
                suffix=""
                className="count-up"
              />
              <small>
                <sup className="font-size-md">.65</sup>
              </small>
            </Typography>
          </h1>

          <div className="widget-btns mt-2 mb-3 ">
            <Button
              className="px-4 py-2 text-uppercase btn-success without-radius m-2 "
              size="small"
              variant="contained"
            >
              {t("buttons:deposit_btn")}
            </Button>
            <Button
              className="px-4 text-uppercase m-2 without-radius  "
              variant="outlined"
              color="secondary"
              size="small"
            >
              {t("buttons:withdraw_btn")}
            </Button>
          </div>
          <div className="devider" />
        </div>
        <div className=" portfolio-content">
          <List className="portfolio-list">
            <PortfolioItem
              walletName={"Paypal"}
              transactionValue={"2,356.00"}
              isDeposit={false}
            />
            <PortfolioItem
              walletName={"Paypal"}
              transactionValue={"2,356.00"}
              isDeposit={true}
            />
            <PortfolioItem
              walletName={"Paypal"}
              transactionValue={"2,356.00"}
              isDeposit={false}
            />
          </List>
        </div>
      </Card>
    </>
  );
}
